<!-- 菜单集合 -->
<!--[if IE 9]>
<style>
.pro-crm-home-tree .ieCompatible{
  display: inline-block;
}
.pro-crm-home-tree .cloudDisk .el-badge__content.is-fixed{
  right: -22px!important;
}
</style>
<![endif]-->
<style lang="scss">
.pro-crm-home-tree {
  background: #ffffff;
  .cloudDisk {
    width: 100%;
    height: 45px;
    border-top: 1px solid #f5f4f4;
    display: flex;
    .el-badge__content.is-fixed {
      top: 20%;
      right: 0px;
    }
    .el-badge__content {
      line-height: 16px;
    }
    .diskCompents:hover {
      color: #2f6bcf;
    }
    .diskCompents {
      width: 49%;
      color: black;
      text-align: center;
      line-height: 45px;
      position: relative;
      cursor: pointer;
      // overflow-x: auto;
      .iframe-style{
        position: absolute;
        top: 40px;
        left: 0;
        z-index: 100;
        background:url('../../assets/images/weather.png') 50% 50% no-repeat;
        background-size: 100%;
        border-radius: 10px;
        padding: 20px;
        box-sizing: content-box;
      }
    }
    .disk {
      border-right: 1px solid #f5f4f4;
    }
  }
  .header-box {
    height: 110px;
    position: relative;
    padding-left: 80px;
    padding-top: 45px;
    // 网盘的菜单的样式
    .photo {
      position: absolute;
      top: 46px;
      left: 25px;
    }
    .name {
      font-weight: bold;
      line-height: 22px;
      font-size: 14px;
    }
    .dept {
      padding-left: 20px;
      color: #a1a1a1;
      padding-right: 10px;
      &::before {
        content: " ";
        padding: 5px;
        background: #2f6bcf;
        border-radius: 100%;
        position: absolute;
        left: 81px;
        bottom: 30px;
      }
    }
  }
  .el-menu {
    border: 0;
    .el-menu-item,
    .el-submenu__title {
      height: 45px;
      line-height: 45px;
      color: #797979;
    }
    .el-submenu__title {
      background: #f5f7fe;
      color: #2f6bcf;
      .color-blue {
        color: #2f6bcf;
      }
    }
    .el-menu-item-group__title,
    .el-submenu__icon-arrow {
      display: none;
    }
    .el-menu-item {
      position: relative;
      .helpicon {
        color: #c0c0c0;
        position: absolute;
        left: 20px;
        top: 2px;
        visibility: hidden;
        font-size: 12px;
        &:hover {
          color: #386bd0;
        }
      }
      &.is-active {
        outline: 0;
        background-color: #ecf5ff;
        .helpicon {
          visibility: visible;
        }
      }
    }
    .el-menu-item.is-active {
    }
  }
}
.pro-crm-home-badgefont {
    display: inline-block;
    margin-left: 5px;
    height: 16px;
    width: 30px;
    border-radius: 30px;
    background: #F28D48;
    line-height: 16px;
    color: #ffffff;
    text-align: center;
    font-size: 12px;
}
</style>
<template>
  <div
    :style="{height:minHeight+'px'}"
    class="pro-crm-home-tree"
  >
    <div class="header-box">
      <div class="name">
        {{ userName }}
      </div>
      <div class="dept">
        {{ userDept }}
      </div>
      <div
        v-html="userPhoto"
        @click="changePhoto"
        class="photo"
      />
    </div>
    <!-- <el-drawer
      id="drawerDisk"
      :visible.sync="diskShow"
      style="min-width: 1500px"
      class="drawerDisk"
      direction="ltr"
      size="100%"
    >
      <cloudDisk
        v-show="diskShow"
        :diskShow="diskShow"
        @closeCloud="closeCloud"
      />
    </el-drawer> -->
    <el-menu
      ref="menu"
      :default-openeds="['workflow','message','transaction','cooperation']"
      @open="open"
      @close="close"
      @select="select"
    >
      <el-submenu
        :index="menu.code"
        v-for="menu in menuData"
        :key="menu"
      >
        <template slot="title">
          <i class="jeicon jeicon-sitemap-o color-blue" />
          <span class="color-blue">{{ getEn(menu.text) }}</span>
        </template>
        <el-menu-item-group>
          <el-menu-item
            :index="item.code"
            v-for="item in menu.children"
            :key="item"
          >
            <i
              v-if="helpMsg[item.code]"
              @click="showHelp(item.code)"
              class="jeicon jeicon-question-circle helpicon"
            />
            <font>{{ getEn(item.text) }}</font>
            <font
              :class="getShowType(item.code,badge[item.badge])"
            >
              {{ getBageNum(badge[item.badge]) }}
            </font>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>
<script>
import VueI18n from 'vue-i18n';
import spe from '../../assets/lang/menu/speNationalList';

const i18n = new VueI18n({
  locale: JE.getCookies('je-local-lang') || 'zh_CN', // 语言标识
  messages: {
    zh_CN: require('./../../assets/lang/menu/zh'), // 中文语言包
    en: require('./../../assets/lang/menu/en'), // 英文语言包
  },
});
export default {
  name: 'HomeMenu',
  components: {
  },
  props: {
    badge: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  inject: ['badgesPro'],
  i18n,
  data() {
    return {
      userPhoto: '',
      minHeight: 1050,
      selectMenu: '',
      diskNum: 0, // 当前网盘的角标
      showWeather: false, // 天气文字默认展示
    };
  },
  computed: {
    userName() {
      return JE.USER.username;
    },
    userDept() {
      return JE.USER.deptName;
    },
    helpMsg() {
      return {
        preapprov: {
          title: '待我审批',
          entitle: 'For my approval',
          msg: '需要我审批的工作流程。流程工作台用于企业内部规范工作流程。',
          enmsg: 'The workflow that needs my approval. A process workbench is used to standardize workflows within an enterprise.',
        },
        postil: {
          title: '批注',
          entitle: 'notation',
          msg: '在系统中部分业务功能提供了批注功能，为业务单据添加批语和注释信息',
          enmsg: 'In the system, some business functions provide annotation function, which adds comments and comments information to business documents',
        },
        notice: {
          title: '通知',
          entitle: 'Notifications',
          msg: '系统业务功能提示给您的通知消息，第一时间获得各个业务的进展情况。',
          enmsg: 'The system business function prompt gives you the notification message, the first time obtains each business progress condition.',
        },
        bubble: {
          title: '冒泡',
          entitle: 'Post',
          msg: '用户企业内部同事之间发布动态、表情、图片，增强同事间的互动。',
          enmsg: 'Internal colleagues of users publish dynamic, facial expressions and pictures to enhance the interaction between colleagues.',
        },
        task: {
          title: '待我处理',
          entitle: 'Todo',
          msg: '用于企业内部上级给下级发布工作事务，并可查看工作进展情况。',
          enmsg: 'It is used to issue work affairs to subordinates and check the progress of work.',
        },
      };
    },
    menuData() {
      return [
        {
          text: '流程工作台',
          code: 'workflow',
          children: [
            { text: '待我审批', code: 'preapprov', badge: 'wfpreapprov' },
            { text: '已办理', code: 'approved', badge: 'wfapproved' },
            { text: '我的流程', code: 'owner', badge: 'wfowner' },
            { text: '已延时', code: 'delay', badge: 'wfdelay' },
          ],
        },
        {
          text: '我的消息',
          code: 'message',
          children: [
            { text: '通知', code: 'notice', badge: 'notice' },
            { text: '冒泡', code: 'bubble', badge: 'bubble' },
          ],
        },
        {
          text: '工作协作',
          code: 'cooperation',
          children: [
            { text: '批注', code: 'postil', badge: 'postil' },
          ],
        },
        {
          text: '交办事项',
          code: 'transaction',
          children: [
            { text: '待我处理', code: 'task', badge: 'tptask' },
            { text: '我的安排', code: 'send', badge: 'tpowner' },
            { text: '历史事务', code: 'history', badge: 'tphistory' },
          ],
        }];
    },
  },

  mounted() {
    sessionStorage.removeItem('docUploadArr');
    // window._crm_home_refreshBadge = function (data) {
    //   console.log('收到的通知', data);
    // };

    const that = this;
    if (JE.isNotEmpty(JE.__USERS__)) {
      that.userPhoto = JE.getUserPhoto(true);
    } else {
      $(document).on('mysubscrible', () => {
        that.userPhoto = JE.getUserPhoto(true);
      });
    }
  },

  methods: {
    // 删除监听
    // deleEventCloud() {
    //   const that = this;
    //   const childEl = document.querySelector('.scroll-body').querySelectorAll('.item');
    //   childEl.forEach((itemEl, elIndex) => {
    //     if (elIndex == 0) return;
    //     itemEl.removeEventListener('click', () => {
    //       that.cloudVM.setVisible(false)
    //     });
    //   });
    // },
    // // 监听点击网盘后是否点击其他菜单了
    addEventCloud() {
      // 监听是否点击了其他区域
      $('.scroll-body .item').each((index, dom) => {
        if (index == 0) return;
        $(dom).click(() => {
          this.cloudVM.setVisible(false);
        });
      });
    },
    showHelp(code) {
      const that = this;
      const info = this.helpMsg[code];
      JE.win({
        title: that.$i18n.locale == 'zh_CN' ? info.title : info.entitle,
        html: that.$i18n.locale == 'zh_CN' ? info.msg : info.enmsg,
        autoShow: true,
        width: 600,
        height: 400,
        bodyStyle: 'line-height: 2;font-size: 16px;padding: 10px 20px;',
        buttonAlign: 'center',
        buttons: [{
          text: that.$i18n.locale == 'zh_CN' ? '关闭' : 'Close',
          cls: 'JEPLUS_B_L10',
          handler(btn) {
            btn.up('window').close();
          },
        }],
      });
    },
    clearSelect() {
      $(this.$el).find('.is-active').removeClass('is-active');
      this.$refs.menu.activeIndex = '';
    },
    changeHeight(height) {
      const me = this;
      me.$el.style.height = `${height > me.minHeight ? height : me.minHeight}px`;
    },
    changePhoto() {
      JE.CoreUtil.updateUserPhoto();
    },
    open(key, keyPath) {
      this.$emit('openfunc', keyPath[0], keyPath[1], true);
    },
    close(key, keyPath) {
      this.$emit('openfunc', keyPath[0], keyPath[1], false);
    },
    select(key, keyPath) {
      const me = this;
      me.$emit('openfunc', keyPath[0], keyPath[1], true);
    },
    getEn(cn) {
      if (!cn) return;
      if (this.$i18n.locale == 'zh_CN') return cn;
      return spe[cn] || cn;
    },
    getShowType(code, num) {
      const datas = ['preapprov', 'notice', 'postil', 'task'];
      return datas.indexOf(code) != -1 && num > 0 ? 'pro-crm-home-badgefont' : '';
    },
    getBageNum(num) {
      if (num > 99) {
        return '99+';
      }
      return num;
    },
  },
};
</script>
